Responsive (Angular Material)

Como ejecutar un código u otro según el tamaño de la ventana del navegador usando angular material

Pagina referencia Angular material

En angular material para hacer uso del responsive utilizamos BreakpointObserver

                import { Component } from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ResponsiveExample';
  destroyed = new Subject<void>();

  constructor(breakpointObserver: BreakpointObserver)
  {

    breakpointObserver
      .observe([
        Breakpoints.XSmall,
        Breakpoints.Small,
        Breakpoints.Medium,
        Breakpoints.Large,
        Breakpoints.XLarge,
      ])
      .pipe(takeUntil(this.destroyed))
      .subscribe(result => {
          if (
            result.breakpoints[Breakpoints.XSmall] || 
            result.breakpoints[Breakpoints.Medium]
          ) {
            console.log("es xsmall o medium");
          }
          else if(result.breakpoints[Breakpoints.Large]){
            console.log("es large");
          }
      });
  }

  ngOnDestroy() {
    this.destroyed.next();
    this.destroyed.complete();
  }
}

En la funcion .observe() indicamos todos los estados que queremos escuchar, y despues en las condiciones if indicamos que queremos ejecutar según el estado en el que nos encontremos.

Responsive | Angular